<template>
  <div class="widgetBox">
    <h1 class="title">小部件管理</h1>
    <div class="tableBox">
      <el-table :data="widgetList" border :row-class-name="rowClassName" height="550">
        <el-table-column prop="wid" label="ID" align="center"/>
        <el-table-column label="模型展示" align="center">
          <template #default="scope">
            <el-image
              fit="contain"
              lazy
              class="widgetImg"
              :src="scope.row.image"
            />
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径" align="center"/>
        <el-table-column prop="model" label="模型文件" align="center"/>
        <el-table-column align="center">
          <template #header>
            <div>
              <el-button size="small" @click="isShow = true">添加</el-button>
            </div>
          </template>
          <template #default="scope">
            <el-button size="small" @click="updateWidget(scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="deleteWidget(scope.row.wid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <WidgetForm
    :isShow="isShow"
    :isUpdate="isUpdate"
    :widgetProp="widgetProp"
    @hide="hideWidget"
  />
</template>

<script setup>
  import {ref,reactive,onBeforeMount} from "vue"
  import {ElMessage} from "element-plus";

  import {http} from "../config/axios/index.js"
  import WidgetForm from "../components/WidgetForm.vue"

  //小部件列表
  const widgetList = reactive([])

  //获取数据
  async function getWidget(){
    let type = "error"
    const res = await http({
      method: "GET",
      url: "widget/get_widget"
    })
    if(res.data.code === 0){
      type = "success"
      widgetList.push(...res.data.data.widgetList)
    }
    //提示消息
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
  }

  //给删除项添加隐藏类名
  const hideList = reactive([])
  function rowClassName({row}){
    let isHide = hideList.some(item=>{
      return row.wid === item
    })
    return isHide ? "hide" : ""
  }

  //删除小部件
  async function deleteWidget(id){
    let type = "error"
    const res = await http({
      method: "GET",
      url: `widget/update_widget`,
      params: {
        wid: id,
        type: "delete"
      }
    })
    if(res.data.code === 0){
      hideList.push(id)
      type = "success"
    }
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
  }

  //是否显示 WidgetForm 组件
  const isShow = ref(false)

  //是否为修改
  const isUpdate = ref(false)

  //表单内容
  const widgetProp = reactive({
    wid: "",
    image: "",
    path: "",
    model: ""
  })

  //修改
  function updateWidget(widget){
    isUpdate.value = true
    isShow.value = true
    for (let key in widget) {
      widgetProp[key] = widget[key]
    }
  }

  //隐藏 WidgetForm 组件
  function hideWidget(widget,isRenewal = false){
    //更新状态
    if(isRenewal){
      if(isUpdate.value){
        widgetList.map(item=>{
          if(item.wid === widget.wid){
            for (let key in widget) {
              item[key] = widget[key]
            }
          }
        })
      }else{
        widgetList.push(widget)
      }
    }
    isShow.value = false
    isUpdate.value = false
  }

  //组件挂载前
  onBeforeMount(()=>{
    getWidget()
  })

</script>

<style scoped>
  .widgetBox{
    width: 100%;
    padding: 20px;
  }
  .tableBox{
    padding-top: 20px;
  }
  :deep(.cell){
    line-height: 1;
  }
  .widgetImg{
    height: 50px;
  }
  :deep(.hide){
    display: none;
  }
</style>